<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="kaiji">
    <meta name="keyword" content="文章, 博客, 信息, 列表">
    <title>文章信息</title>
	<#include "admin/common.ftl" />
	<style type="text/css">
		.toolbar {
            border: 1px solid #ccc;
        }
        .text {
            border: 1px solid #ccc;
            height: 200px;
        }
        .tag-index{
        	text-align: center;
        	padding: 7px;
        	border: 1px solid #c9c9c9;
        	border-radius: 5px;
        	background: #f9f9f9;
        	margin-right: 8px;
        	display: block;
        }
        .tag-index .x-close {
        	padding-left: 10px;
        	color: #c9c9c9;
        	cursor: pointer;
        }
        .tag-index .x-close:hover{
        	color: #7d7d7d;
        }
        .input-tag {
			display: block;
			padding: 2px 8px;
			background: #e9e9e9;
			border-radius: 2px;
			font-size: 12px;
			max-width: 480px;
			color: #4f4f4f;
			overflow: hidden;
			white-space: nowrap;
			float: left;
        }
		.input-tag:focus {
			border: none;
			outline: none;
		}
	</style>
  </head>

  <body>
  <section id="container" class="">
      <!--header start-->
      <#include "admin/header.ftl" />
      <!--header end-->
      <!--sidebar start-->
      <#include "admin/sidebar.ftl" />
      <!--sidebar end-->
      <!--main content start-->
      <section id="main-content">
          <section class="wrapper">
            <div class="row">
              <div class="col-lg-12">
                  <section class="panel">
                      <header class="panel-heading">文章信息</header>
                      <div class="panel-body">
                          <form id="editForm" role="form" class="form-horizontal tasi-form" 
                          action="${ctx}/admin/article/<#if article??>update<#else>save</#if>.html" method="POST">
                          	 <input type="hidden" name="articleId" value="${(article.articleId)}" 
                          	 enctype="multipart/form-data" />
							  <div class="form-group">
							    <label class="control-label col-sm-2" for="title" >标题</label>
							    <div class="col-sm-5">
							      <input name="title" value="${(article.title)}" class="form-control" type="text" />
							    </div>
							  </div>
							  <div class="form-group">
							    <label class="control-label col-sm-2" for="content" >内容</label>
							    <div class="col-sm-10">
							    	  <div id="toolbar" class="toolbar"></div>
							    	  <div style="padding: 5px 0; color: #ccc"></div>
							    	  <div id="text_one" class="text"><p>${(article.content)}</p></div>
							    	  <textarea id="articleText" name="content" style="display: none;"></textarea>  
							    </div>
							  </div>
							  <div class="form-group">
							    <label class="control-label col-sm-2" for="status" >发布</label>
							    <div class="col-sm-5">
							      <label class="checkbox-inline">
							      <input type="radio" name="status" <#if article.status == 0>checked=true</#if> value="0"/>发布
                                   </label>
							      <label class="checkbox-inline">
							      <input type="radio" name="status" <#if article.status == 1>checked=true</#if> value="1"/>下架
                                   </label>
							    </div>
							  </div>
							  <div class="form-group">
							  	<label class="control-label col-sm-2" for="tag">标签</label>
							  	<div class="col-sm-5" id="tag-div">
									<#if tagList??>
										<#list tagList as tag>
											<div style="float: left">
												<span class="tag-index">
													<span contenteditable="true" class="input-tag" autofocus="autofocus">${(tag.name)!}</span>
													<span class="x-close" data-id="${tag.id}">X</span>
												</span>
											</div>
										</#list>
									</#if>
							  	</div>
							  	<button class="btn btn-warning" type="button" id="add-tag">
						      			<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>添加标签
						      		</button>
							  </div>
							  
							  
                              <div class="form-group">
                                <label class="control-label col-lg-2" for="parentId">文章状态</label>
				          	    <div class="col-lg-10">
				          	    	  <select name="sort" class="col-sm-1">
				          	    	  	<option value="0" <#if article.sort == 0>selected="selected" </#if>>正常</option>
				          	    	    <option value="1" <#if article.sort == 1>selected="selected" </#if>>热帖</option>
				          	    	    <option value="2" <#if article.sort == 2>selected="selected" </#if>>精华</option>
				          	    	    <option value="3" <#if article.sort == 3>selected="selected" </#if>>置顶</option>
				          	    	  </select>
				          	    </div>
                              </div>
							  <input type="hidden" name="tagIds" id="tagIds" />
                              <div class="form-group">
                                  <div class="col-lg-offset-2 col-lg-10">
                                      <button class="btn btn-danger" type="submit">保存</button>
                                      <button class="btn" type="button" onClick="javascript:history.go(-1);">返回</button>
                                  </div>
                              </div>
                          </form>
                      </div>
                  </section>
              </div>
          </div>
	  </section>
  <!--main content end-->
 </section>

<#include "admin/common_js.ftl" />
<script src="${ctx}/js/jquery.validate.min.js" ></script>
<script src="${ctx}/assets/editor/wangEditor.js" ></script>
<script type="text/javascript">
$(function(){
	// 富文本框
	var E = window.wangEditor;
	var editor = new E("#toolbar", '#text_one');
	// 上传配置
	editor.customConfig.uploadImgServer = '${ctx}/admin/article/upload.html';
	editor.customConfig.uploadFileName = 'file';
	editor.customConfig.debug = true;
	var $contentText = $("#articleText");
	editor.customConfig.onchange = function (html) {
		$contentText.val(html)
	}
	editor.create();

	$("#editForm").validate({
	  rules:{
	  	"title": {required: true},
	  	"content": {required: true},
	  	"status": {required:true},
	  	"sort": {required:true}
	  },
	  messages: {
	  	"title": {required: "请输入标题!"},
	  	"content": {required: "请输入内容！"},
	  	"status": {required: "请选择一项！"},
	  	"sort": {required: "请选择一项！"}
	  }, 
	  submitHandler: function(form){
		  var xs = $(".x-close");
		  var ids = "";
		  xs.each(function () {
			 var id = $(this).data("id");
			 ids += id + ",";
		  });
		  $("#tagIds").val(ids);
		  var data = $("#editForm").serialize();
		  $.ajax({
			  url: $(form).attr("action"),
			  data: data,
			  type: "post",
			  dataType: "json",
			  success: function(data) {
				  if (data.success == 0) {
					  layer.alert(data.message, {icon: 5});
				  } else {
					  location.href = "${ctx}/admin/article/mylist.html";
				  }
			  }
		});
	  }
	
	});
	
	$("body").on("click", ".x-close", function() {
		var id = $(this).data("id");
		$(this).parent().parent().remove();
		$.ajax({
			url: "${ctx}/admin/tag/delete.html",
			data: {tagId: id},
			type: "post",
			async: false,
			dataType: "json",
			success: function(data) {
				if (data.success == 0) {
					layer.alert(data.message, {icon: 5});
				}
			}
		});
	});
	
	$("#add-tag").click(function() {
		var len = $(".input-tag").length;
		if (len >= 6) {
			layer.alert("最多只能添加6个标签！", {icon: 5});
			return false;
		}
		var html = "<div style=\"float: left\"><span class=\"tag-index\"><span contenteditable=\"true\" class=\"input-tag\" autofocus=\"autofocus\"></span><span class=\"x-close\" data-id=\"\">X</span></span></div>";
		$("#tag-div").append(html);
		$(".input-tag:last").focus().select();
	});

	$("body").on("blur", ".input-tag", function() {
		var $this = $(this);
		var $content = $this.text();
		if ("" == $content || undefined == $content || $content == null) {
			$(this).parent().parent().remove();
		} else {
			$.ajax({
				url: "${ctx}/admin/tag/save.html",
				data: {name: $content},
				type: "post",
				async: false,
				dataType: "json",
				success: function(data) {
					if (data.success == 0) {
						layer.alert(data.message, {icon: 5});
					} else {
						$this.next().attr("data-id", data.id);
					}
				}
			});
		}

	});

});
</script>
  </body>
</html>